<template>
  <!-- 轮播图片 -->
  <div class="el-carousel">
    <el-carousel
      :height="bannerHeight + 'px'"
      :interval="interval"
      trigger="click"
      arrow="always"
      :autoplayHoverPause="true"
      @change="handleChange"
    >
      <el-carousel-item v-for="item in carouselList" :key="item.id">
        <div class="carousel-explain">
          <img
            class="image"
            :height="imgheight"
            :width="imgwidth"
            ref="bannerHeight"
            :src="item.url"
            alt="无图片"
          />
          <div class="xnsq">
            <p
              class="xnsqcnt animated infinite bounceOutRight"
              v-html="item.xnsqcnt"
            ></p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <baidu-map
      v-if="showMap"
      ref="baiduMap"
      :point-list="pointList"
    ></baidu-map>
  </div>
</template>

<script>

import BaiduMap from "@/components/BaiduMap";

export default {
  name: "Carousel",
  components: {
    /* Flag, */
    BaiduMap,
  },
  //接收来自父组件的数据
  props: {
    // 轮播图宽度
    width: {
      type: Number,
      default: 0,
    },
    height: {
      type: String,
      default: "400",
    },
    // 相邻两张图片切换的间隔时间
    interval: {
      type: Number,
      default: 5000,
    },
    //图片宽
    widthImage: {
      type: Number,
      default: 100,
    },
    //图片高
    heightImage: {
      type: Number,
      default: 100,
    },
    // 轮播图路径数组
    carouselList: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      currentItem: null,
      pointList: [],
      showMap: false,
      bannerHeight: "",
      imgheight: "",
      imgwidth: "",
    };
  },
  mounted() {
    this.imgLoad();
    window.addEventListener(
      "resize",
      () => {
        this.imgheight = document.body.clientHeight;
        this.imgwidth = document.body.clientWidth;
        this.imgLoad();
      },
      false
    );
  },

  methods: {
    changeView(point) {
      this.$refs.baiduMap.changeView(point);
    },
    handleChange(index) {
      this.currentItem = this.carouselList[index].flags;
    },
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight = document.body.clientHeight;
        this.imgheight = document.body.clientHeight;
        this.imgwidth = document.body.clientWidth;
      });
    },
    flagClick(props) {
      const that = this;
      console.log({ props });
      if (props) {
        that.pointList = props;
      }
      /*if (props) {
                    this.ele = createModal(Detail, props);
                    this.ele.show();
                }*/
    },
  },
};
</script>

<style scoped>
.el-carousel {
  overflow-x: hidden;
  overflow-y: hidden;
}

.el-carousel__item {
  background-color: #99a9bf;
}
.carousel-explain {
  position: relative;
  width: 100%;
  height: 100%;
}

.image {
  max-height: 100%;
}

.xnsq {
  color: white;
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%);
  height: 100px;
  width: 600px;
  font-family: sans-serif;
}

.xnsqtitle {
  font-size: 30px;
  text-align: center;
}

@-webkit-keyframes slideShine {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}
@keyframes slideShine {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

.xnsqcnt {
  background: #ff6a6a -webkit-linear-gradient(
      left,
      #ff6a6a,
      #febaf7 50%,
      #ff0 90%,
      #ff6a6a
    ) no-repeat 0 0;
  background-size: 20% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 36px;
  text-align: center;
  /* font-weight: bold; */
  text-decoration: underline;
}
.xnsqcnt {
  -webkit-animation: slideShine 4s linear infinite;
  animation: slideShine 4s linear infinite;
}

/*左右箭头的样式*/
button.el-carousel__arrow.el-carousel__arrow--left,
button.el-carousel__arrow.el-carousel__arrow--right {
  font-size: 50px;
  height: 50px;
  width: 50px;
}
</style>
